import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, 
  TouchableOpacity,ScrollView
} from 'react-native';
import {BASEURL} from '../../api/api';

import BackButton from '../../component/BackButton';
import { TipModal } from '../../component/Tips';
import {jumpPage} from '../../common/common'
import {width} from '../../common/common'
var IMG_URL =  BASEURL+'image/showImage?imageName=';
export default class TypeSelect extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title: '选择行业',
      headerRight:(<View></View>),
      headerLeft:<BackButton navigation = {navigation}/>
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      data:[
        {text: '个人', img: require('../../images/home/icon_geren.png')},
        {text: '教育', img: require('../../images/home/icon_jiaoyu.png')},
        {text: '服务', img: require('../../images/home/icon_fuwu.png')},
        {text: '互联网', img: require('../../images/home/icon_hulianwang.png')},
        {text: '电商', img: require('../../images/home/icon_dianshang.png')},
        {text: '餐饮', img: require('../../images/home/icon_canyin.png')},
        {text: '金融', img: require('../../images/home/icon_jinrong.png')},
        {text: '文娱', img: require('../../images/home/icon_wenyu.png')},
        {text: '地产', img: require('../../images/home/icon_dichan.png')},
        {text: '时尚', img: require('../../images/home/icon_shishang.png')},
        {text: '美业', img: require('../../images/home/icon_meiye.png')},
        {text: '其它', img: require('../../images/home/icon_qita.png')},
      ],
      gridData: [],
    })
  }
  componentWillMount(){
    
  }
  componentDidMount(){
    this._getTempTypeList();
  }
  _getTempTypeList(){
    this.refs.tipModal._loading();
    fetch(BASEURL+'home/getTempType?showInHome=')
    .then(res=>res.json())
    .then(result=>{
      this.refs.tipModal._close();
      console.log(result);
      if(result.succ == '1'){
        this.setState({
          gridData: result.list,
        })
      }
    })
  }
  _select(item){
    // const {goBack,state} = this.props.navigation;
    // state.params.callback({index,text});
    // this.props.navigation.goBack(); 
    jumpPage(this.props.navigation,'typeList',{typeId: item.tempTypeId,typeName: item.typeName})
  }
  _renderList(){
    let {gridData} = this.state;
    let array = [];
    for(let i=0; i<gridData.length; i++){
      let item = gridData[i];
      array.push(
        <TouchableOpacity style={styles.menuView} key={i} onPress={()=>this._select(item)}>
          <Image style={styles.menuIcon} source={{uri:IMG_URL+item.typeIcon}}/>
          <Text style={styles.menuText}>{item.typeName}</Text>
        </TouchableOpacity>
      )
    }
    return array;
  }
  render(){
    return(
      
      <ScrollView style={{flex:1}}>
        <View style={styles.container}>
          <Text style={styles.topText}>以便我们为您呈现适合您的模板</Text>
          <View style={styles.menuContainer}>
            {this._renderList()}
          </View>
          <TipModal ref="tipModal"/>
        </View>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  topText:{
    paddingLeft:30,
    paddingTop:10,
    paddingBottom:10,
    color:'#888',
  },  
  menuContainer:{
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent:'flex-start',
    paddingLeft:20,
    paddingRight:20,
  },
  menuText:{
    color:'#555',
    fontSize:14,
    padding:5,
  },  
  menuIcon:{
    width:width>500 ? 65 : (width-40)/5.5,
    height:width>500 ? 65 : (width-40)/5.5,
    resizeMode:'contain',
    marginTop:10,
    marginBottom:5,
  },  
  menuView:{
    width: (width-40)/3,
    justifyContent:'center',
    alignItems:'center',
    // borderWidth:StyleSheet.hairlineWidth,
    // borderColor:'red'
  },
  container: {
    backgroundColor:'#f0f0f0',
    paddingTop:10,
    flex: 1,
    flexDirection:'row',
    flexWrap:'wrap',
    alignItems:'center',
    
  },
})